<template>
	<div class="content1">
		<div class="stationDiv">
			<div class="leftTable">
				<div class="searchBox">
					<span class="searchText">地域:</span>
					<el-cascader :options="options" v-model="city" clearable></el-cascader>
					<span class="searchText">电站名称:</span><input type="text" class="searchInput" placeholder="请输入电站名称" v-model="buildName">
					<span class="searchText">大楼状态:</span>
					<select class="searchInput" v-model="buildStatus" >
						<option value=''>全部</option>
						<option value="120010">启用</option>
						<option value="120012">禁用</option>
						<option value="120011">建设中</option>
					</select>
					<el-button type="primary" icon="el-icon-search" @click="getStation" :disabled="canSearch">搜索</el-button>
				</div>
				<div class="flexBox">
					<div class="allStation">
						<el-checkbox v-model="checked" disabled>全部电站</el-checkbox>
						<img src="~_assets/dztip.png" class="pictip"/>
						<span>包含所有正在对外运营的充电站</span>
						<span class="checkTxt" v-show="diffActivityBuild" v-text="diffText" style="right:-134%"></span>
					</div>
					<div class="playBox">
						<el-button @click="showStationDialog(1)">选择电站</el-button>
					</div>
				</div>
				<div class="contentTable">
					<bootstrap-table :my_columns="my_columns" :my_data="data1" :my_options="my_options" ref="table1"></bootstrap-table>
				</div>
			</div>
			<div class="rightDiv">
				<p class="setText">优惠券分组折扣设置</p>
				<div class="operateDiv">
					<p class="operateText">分组信息:</p>
					<div class="addGroupBtn" @click="showStationDialog(2,1)">添加分组</div>
					<p class="seeGroupBtn" @click="showStationDialog(2,2)" v-show="isShowSeeGroup">查看分组</p>
					<span class="checkTxt" v-show="diffGroup" v-text="diffText" style="right:37%"></span>
				</div>
				<div class="operateDiv">
					<p class="operateText">折扣设置:</p>
					<el-input placeholder="请输入折扣" v-model.trim="discountRule" class="setInput" clearable maxlength="3">
					</el-input>
					<span class="checkTxt" v-show="diffDiscountRule" v-text="diffText" style="right:17%"></span>
				</div>
				<div class="operateDiv">
					<p class="operateText">折扣项目:</p>
					<el-radio v-model="discountType" label="1">服务费</el-radio>
				</div>
				<div class="operateDiv">
					<p class="operateText">折扣时段:</p>
					<el-checkbox-group v-model="discountElecTypeArr">
						<el-checkbox label="4">峰时</el-checkbox>
						<el-checkbox label="2">平时</el-checkbox>
						<el-checkbox label="1">谷时</el-checkbox>
					</el-checkbox-group>
					<span class="checkTxt" v-show="diffDiscountElecType" v-text="diffText" style="right:17%"></span>
				</div>
				<div class="operateDiv">
					<p class="operateText">优惠叠加:</p>
					<el-checkbox v-model="isActivityIsAccumulate">享受优惠券</el-checkbox>
					<el-checkbox v-model="isRedIsAccumulate">享受红包</el-checkbox>
					<span class="checkTxt" v-show="diffAccumulate" v-text="diffText" style="right:26%"></span>
				</div>
			</div>
			<div class="btns">
				<div class="pageBtn btn next" @click="goNext(-1)">上一步</div>
				<div class="pageBtn btn save" @click="goNext(0)">保存</div>
				<div class="pageBtn btn next" @click="goNext(1)">下一步</div>
			</div>
		</div>
		<PowerStation v-if="showStation" @closeStation="closeStation" :type="type" :ids="ids"></PowerStation>
	</div>
</template>

<script>
import { area } from "_config/common.js";
import Step from "_components/Step";
import PowerStation from "_components/PowerStation";
import {
  SAVE_OR_EDIT_DISCOUNT_CHARGE,
  FIND_USABLE_SITE_BY_PARAM,
  FIND_DISCOUNT_CHARGE_BY_CODE,
  FIND_DISCOUNT_BUILD_LIST
} from "@/config/url";
import Bus from "@/bus.js";
import { publicVM } from "@/config/public";

export default {
  mixins: [publicVM],
  components: {
    Step,
    PowerStation
  },
  data() {
    return {
      options: area,
      city: [],
      checked: false,
      my_columns: [
        {
          title: "序号",
          field: "",
          formatter: function(i, row, index) {
            return index + 1;
          }
        },
        {
          title: "电站名称",
          field: "name",
          formatter: function(i, row, index) {
            return i;
          }
        },
        {
          title: "状态",
          field: "status",
          formatter: function(i, row, index) {
            if (i == 120010) {
              return "启用";
            } else if (i == 120011) {
              return "建设中";
            } else if (i == 120012) {
              return "禁用";
            }
          }
        }
      ],
      data1: [],
      my_options: {
        pagination: true
        // sidePagination:'server'
      },
      config: {
        checkbox_rows: true,
        rows_selectable: true,
        card_title: "Vue Bootsrap 4 advanced table"
      },
      showStation: false, //显示电站
      type: 1, //电站or分组
      province: null,
      city: null,
      area: null,
      buildName: null,
      buildStatus: "",
      activityCode: sessionStorage.getItem("activityCode"), //活动code
      activityBuild: [], //参与活动电站：0 全部电站
      discountRule: "1.0", //折扣设置：1.0~10.0之前数
      discountType: "1", //折扣类型：0全账单。1服务费
      discountElecType: [], //折扣电价类型：3:峰时 2：平时 1：谷时
      discountElecTypeArr:[],//
      activityIsAccumulate: "0", // 优惠叠加：0 不叠加，1 叠加
      isActivityIsAccumulate: false, //
      activityGroup: null, //特惠分组
      redIsAccumulate: "0", //红包叠加：0 不叠加，1 叠加
      isRedIsAccumulate: false, //
      discountScenes: "983002", //打折场景：983001 电站打折，983001 优惠分组打折
      repeatRecord: sessionStorage.getItem("repeatRecord"), //活动复录：0 初录，1 复录
      buildId: "",
      canSearch: false, //可否点搜索
      canStation: false, //可否选择电站
      repeatContent: null, //初录内容
      diffText: "与初录不一致",
      diffGroup: false,
      diffDiscountRule: false,
      diffDiscountElecType: false,
      diffAccumulate: false,
      diffActivityBuild: false,
      canGroup: false,
      isIdentical: null, //0 一致，1 不一致
      page: 1,
      size: 10,
      ids:'',
      isShowSeeGroup: false,
    };
  },
  watch: {
    isActivityIsAccumulate(val) {
      if (val) {
        this.activityIsAccumulate = "1";
      } else {
        this.activityIsAccumulate = "0";
      }
      this.diffAccumulate =
        this.repeatRecord == 1 &&
        this.repeatContent &&
        (this.activityIsAccumulate != this.repeatContent.activityIsAccumulate ||
          this.redIsAccumulate != this.repeatContent.redIsAccumulate);
    },
    isRedIsAccumulate(val) {
      if (val) {
        this.redIsAccumulate = "1";
      } else {
        this.redIsAccumulate = "0";
      }
      this.diffAccumulate =
        this.repeatRecord == 1 &&
        this.repeatContent &&
        (this.redIsAccumulate != this.repeatContent.redIsAccumulate ||
          this.activityIsAccumulate != this.repeatContent.activityIsAccumulate);
    },
    checked(val) {
      if (val) {
        this.data1 = [];
        this.canSearch = true;
        this.canStation = true;
      } else {
        this.canSearch = false;
        this.canStation = false;
      }
    },
    activityGroup(val) {
      this.diffGroup =
        this.repeatRecord == 1 &&
        this.repeatContent &&
        val != this.repeatContent.activityGroup;
      this.canGroup = val ? true : false;
    },
    discountRule(val) {
      this.diffDiscountRule =
        this.repeatRecord == 1 &&
        this.repeatContent &&
        val != this.repeatContent.discountRule;
    },
    // discountElecType(val) {
    //   let arr = [...val]
		// 	arr = arr.sort()
    //   this.diffDiscountElecType =
    //     this.repeatRecord == 1 &&
    //     this.repeatContent &&
    //     arr.toString() != this.repeatContent.discountElecType;
    // },
    activityBuild(val) {
      let arr = val;
      this.diffActivityBuild =
        this.repeatRecord == 1 &&
        this.repeatContent &&
        val.toString() != this.repeatContent.activityBuild;
    }
  },
  mounted() {
    this.getFirstData();
  },
  methods: {
    getFirstData() {
      let that = this;
      this.$fetch(FIND_DISCOUNT_CHARGE_BY_CODE, {
        activityCode: this.activityCode,
        repeatRecord: "0"
      })
        .then(res => {
          if (res.status == 1) {
            this.repeatContent = res.data;
            if (res.data) {
              if (this.repeatRecord == 0) {
                this.updateData(res.data);
              } else {
                this.diffDiscountElecType = !res.data.discountElecType;
                this.diffAccumulate =
                  res.data.activityIsAccumulate != 0 ||
                  res.data.redIsAccumulate != 0;
                this.getSecData();
              }
            }
          } else {
            this.$message({
              message: "获取初录奖项设置数据失败",
              type: "warning"
            });
          }
        })
        .catch(err => {
          console.log(err);
          this.$message({
            message: "获取初录奖项设置数据异常",
            type: "warning"
          });
        });
    },
    getSecData() {
      let that = this;
      this.$fetch(FIND_DISCOUNT_CHARGE_BY_CODE, {
        activityCode: this.activityCode,
        repeatRecord: "1"
      })
        .then(res => {
          if (res.status == 1) {
            let data = res.data;
            if (data && this.repeatRecord == 1) {
              this.updateData(data);
            }
          } else {
            this.$message({
              message: "获取复录奖项设置数据失败",
              type: "warning"
            });
          }
        })
        .catch(err => {
          console.log(err);
          this.$message({
            message: "获取复录奖项设置数据异常",
            type: "warning"
          });
        });
    },
    updateData(data) {
      if (data.activityBuild && data.activityBuild != "0") {
        this.activityBuild = data.activityBuild;
        this.activityGroup = data.activityGroup;
        this.getStation();
      } else if (data.activityBuild == "0") {
        this.checked = true;
        this.canSearch = true;
      }
      this.isShowSeeGroup = true;
      this.discountRule = data.discountRule;
      this.activityGroup = data.activityGroup;
      this.discountElecTypeArr = data.discountElecType.split(",");
      this.isActivityIsAccumulate = data.activityIsAccumulate != 0;
      this.isRedIsAccumulate = data.redIsAccumulate != 0;
    },
    goNext(type) {
      if (type == -1) {
        this.$router.push("/settingIndex/newRulesSale");
        Bus.$emit("changeStep");
      } else {
        if (this.repeatRecord == 0) {
          this.isIdentical = 0;
        } else {
          if (
            this.diffActivityBuild ||
            this.diffGroup ||
            this.diffDiscountRule ||
            this.diffDiscountElecType ||
            this.diffAccumulate
          ) {
            this.isIdentical = 1;
          } else {
            this.isIdentical = 0;
          }
        }
        if (this.discountRule == "" || this.discountRule == null || this.discountRule < 1 || this.discountRule >= 10) {
          this.$message({
            message: `请输入1.0~9.9折扣区间`,
            type: "warning"
          });
          return;
        }
        if (this.discountElecTypeArr.length <= 0) {
          this.$message({
            message: `请选择折扣时段`,
            type: "warning"
          });
          return;
        } else {
          let num = 0;
          for (let i = 0; i < this.discountElecTypeArr.length; i++) {
            num += this.discountElecTypeArr[i] * 1;
          }
          this.discountElecType = num;
        }
        let activityBuild;
        if(this.activityBuild.length > 0){
          activityBuild = this.activityBuild.toString()
        }else if(this.activityBuild == 0){
          activityBuild = this.activityBuild
        }else{
          this.$message({
            message: `请选择电站`,
            type: "warning"
          });
          return;
        }
        this.$post(SAVE_OR_EDIT_DISCOUNT_CHARGE, {
          activityCode: this.activityCode,
          activityBuild: activityBuild,
          discountRule: this.discountRule,
          discountType: this.discountType,
          discountElecType: this.discountElecType,
          activityIsAccumulate: this.activityIsAccumulate,
          activityGroup: this.activityGroup,
          redIsAccumulate: this.redIsAccumulate,
          discountScenes: this.discountScenes,
          repeatRecord: this.repeatRecord,
          isIdentical: this.isIdentical
        })
          .then(res => {
            if (res.status == 1) {
              this.$message({
                message: "保存成功",
                type: "success"
              });
              if (type == 1) {
                Bus.$emit("changeStep");
                this.$router.push("/settingIndex/activityDone");
              }
            } else {
              this.$message({
                message: res.data,
                type: "warning"
              });
            }
          })
          .catch(err => {
            console.log(err);
            this.$message({
              message: "保存失败",
              type: "warning"
            });
          });
      }
    },
    getStation() {
      this.my_options = {
        pagination: true,
        sidePagination: "server",
        url: FIND_USABLE_SITE_BY_PARAM,
        queryParams: this.getParams
      };
    },
    getParams() {
      if (this.city) {
        this.province = this.city[0];
        this.city1 = this.city[1];
        this.area = this.city[2];
      }
      let param = {
        province: this.province,
        city: this.city1,
        area: this.area,
        buildName: this.buildName,
        buildStatus: this.buildStatus,
        buildId: this.buildId,
        page: this.$refs.table1.local.options.pageNumber,
        size: this.$refs.table1.local.options.pageSize
      };
      return param;
    },
    showStationDialog(type, groupType) {
      if (type == 1) {
        this.ids = ''
        this.type = {
          type: 1
        };
      } else {
        this.ids = this.activityGroup
        this.type = {
          type: 2,
          groupType: groupType
        };
      }
      this.showStation = !this.showStation;
    },
    closeStation(data) {
      if (data) {
        if (data.type == 1) {
          this.data1 = data.data;
          if(this.data1.length > 0){
            this.activityBuild = []
            for (let item of data.data) {
              this.activityBuild.push(item.id);
            }
            this.buildId = this.activityBuild.toString();
            this.ids = this.activityBuild.toString();
          }else{
            this.ids = '';
          }
            this.checked = data.allStatus
        } else if(data.type == 2){
          let ids = [];
          for (let item of data.data) {
            ids.push(item.id);
          }
          this.activityGroup = ids.toString();
          this.isShowSeeGroup = true;
        }
      }
      this.showStation = false;
    }
  }
};
</script>

<style lang='less'>
.stationDiv {
  display: flex;
}

.leftTable,
.rightDiv {
  height: 3.3rem;
  background: rgba(255, 255, 255, 1);
  box-shadow: 0px 2px 12px 0px rgba(202, 218, 255, 0.3);
  border-radius: 8px;
}

.leftTable {
  width: 66%;
}

.rightDiv {
  width: 33%;
  margin-left: 0.03rem;
}
.flexBox,
.allStation {
  display: flex;
}
.allStation {
  align-items: center;
  width: 60%;
  margin-left: 0.05rem;
  position: relative;
}
.setText {
  width: 94%;
  color: #3395ff;
  font-size: 0.1rem;
  border-bottom: 1px solid rgba(240, 241, 242, 1);
  margin: 0.3rem 0 0.2rem 0.08rem;
}

.setText::after {
  content: "";
  display: block;
  width: 0.9rem;
  height: 0.016rem;
  background: rgba(51, 149, 255, 1);
}
.operateDiv {
  width: 100%;
  margin: auto;
  margin-bottom: 0.15rem;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-left: 0;
  position: relative;
}
.checkTxt {
  color: #ff2e2e;
  position: absolute;
  right: -7%;
}

.operateText {
  text-align: end;
  width: 13%;
  margin-right: 0.08rem;
}
.setInput {
  width: 50%;
}
.addGroupBtn {
  width: 76px;
  height: 24px;
  background: rgba(51, 149, 255, 1);
  color: #fff;
  opacity: 0.8;
  border-radius: 4px;
  text-align: center;
  line-height: 24px;
  cursor: pointer;
}
.seeGroupBtn {
  font-size: 14px;
  text-decoration: underline;
  color: rgba(45, 51, 67, 1);
  line-height: 26px;
  margin-left: 0.05rem;
  cursor: pointer;
}

.btns {
  position: fixed;
  bottom: 0.15rem;
  left: 45%;
}

.pageBtn {
  width: 0.8rem;
  height: 0.2rem;
  background: #3395ff;
  border-radius: 8px;
  color: #fff;
  margin-left: 0.2rem;
}

// .next {
// 	background: #A9D0FF;
// }

.el-cascader {
  margin-right: 0.1rem;
  margin-left: 0.04rem;
}

.el-cascader .el-input--suffix .el-input__inner {
  height: 0.16rem;
  border-radius: 8px;
  padding-left: 0.08rem;
  background: rgba(255, 255, 255, 1);
  border: 1px solid rgba(181, 194, 202, 1);
  margin-right: 0.1rem;
  margin-left: 0.04rem;
  padding-right: 0.2rem;
}
.bootstrap-table {
  padding-top: 0;
}
.stationDiv .bootstrap-table table tbody {
  height: 410px !important;
}
.pictip {
  width: 18px;
  height: 18px;
  margin-left: -0.12rem;
  margin-right: 0.05rem;
}
.el-checkbox,
.el-radio {
  padding-top: 0.04rem;
}
</style>